<!--搜索框-->
<form action="#" class="layui-form" id="role-search-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label>角色名:</label>
            <div class="layui-inline">
                <input type="text" name="name" id="name" autocomplete="off" placeholder="请输入名称"
                       class="layui-input">
            </div>
            <label>状态:</label>
            <div class="layui-inline">
                <select name="status" id="status">
                    <option value="">请选择</option>
                    <option value="0">无效</option>
                    <option value="1">有效</option>
                </select>
            </div>
            <!--            <button class="layui-btn" lay-submit lay-filter="role-table" >搜索</button>-->
            <input type="button" class="layui-btn" id="btn" value="搜索"/>
        </div>
    </div>
</form>
<!--添加框-->
<script type="text/html" id="role-head-bar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add-role"><i class="layui-icon">&#xe654;</i>添加</button>
        </button>
    </div>
</script>
<!--编辑框-->
<script type="text/html" id="role-bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit-role">编辑</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="assign-menu">授权</a>
</script>
<!--开关框-->
<script type="text/html" id="role-switch-bar">
    <input type="checkbox" name="status" lay-skin="switch" lay-text="有效|无效" lay-filter="status-filter"
           value="{{d.id}}" {{ d.status== 1 ? 'checked' : '' }} >
</script>
<!--table表-->
<table class="layui-table" lay-filter="role-table" id="role-table"></table>


<script>


    //渲染，绑定事件
    layui.use(['table', 'layer', 'form'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;

        //给开关按钮绑定监听事件
        form.on("switch(status-filter)", function (obj) {
            // console.log(obj);
            var status = obj.elem.checked;      //选中状态
            $.ajax({
                url: "sys/role/update",
                type: 'POST',
                data: "id=" + this.value + "&status=" + (status ? "1" : "0"),
                success: function (result) {
                    if (result.state) {
                        layer.tips("修改成功", obj.othis);
                    } else {
                        layer.tips(result.message, obj.othis);
                    }
                }, error: function () {
                    layer.tips("修改失败", obj.othis);
                }
            });
        })

        //渲染表格
        table.render({
            id: "role-table"
            , elem: "#role-table"
            , page: {limits: [5, 10, 15, 20, 25]}
            , url: "sys/role/search"
            , toolbar: "#role-head-bar"
            , cols: [[
                {field: "id", title: "ID", sort: true}
                , {field: "name", title: "角色名"}
                , {field: "remark", title: "备注"}
                , {field: "status", title: "状态", toolbar: "#role-switch-bar"}
                , {field: "right", title: "操作", toolbar: "#role-bar", width: 150}
            ]]
        });

        //绑定工具栏监听事件
        table.on("toolbar(role-table)", function (obj) {
            switch (obj.event) {
                case "add-role":
                    openAddWindow(null);
                    break;
            }
        });

        //给编辑按钮绑定事件
        table.on("tool(role-table)", function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case "edit-role":
                    openAddWindow(data);
                    break;
                case "assign-menu":
                    //授权管理
                    layer.open({
                        type: 1
                        , title: '角色授权'
                        , content: $("#menu-tree-layer").html()
                        , area: ['400px', '600px']
                        , btn: ['确定', '取消']
                        , success: function (index, layero) {  //使用layui补全菜单
                            $.ajax({
                                url: "sys/role/role_menu"
                                , type: 'POST'
                                , data: "roleId=" + data.id //传递角色id，查询所有的菜单id
                                , success: function (json) {
                                    //勾选已经拥有的菜单
                                    $("#menu-tree").tree({
                                        url: "sys/role/menu_tree",
                                        checkbox: true,
                                        formatter: function (node) {
                                            return node.name;
                                        }, onLoadSuccess: function (node, data) {//树加载成功之后
                                            var tree = $("#menu-tree");
                                            for (var i = 0; i < json.length; i++) {
                                                var node = tree.tree('find', json[i]);
                                                if (node != null && tree.tree("isLeaf", node.target)) {
                                                    tree.tree("check", node.target);
                                                }
                                            }
                                        }
                                    });
                                }
                            });
                        }
                        , yes: function (index, layero) {
                            //树中全选和半选的都要
                            var nodes = $("#menu-tree").tree('getChecked', ['checked', 'indeterminate']);
                            var ids = new Array();
                            $.each(nodes, function (i, obj) {
                                ids.push(obj.id);
                            })
                            $.ajax({
                                url: "sys/role/assign_menu",
                                type: "post",
                                data: "roleId=" + data.id + "&menuIds=" + ids,  //角色id,菜单ids
                                success: function (json) {
                                    if (json.state) {
                                        layer.close(index); //更新结果
                                    } else {
                                        layer.msg(json.message);    //更新结果
                                    }
                                }
                            })
                        }

                    })
                    break;
            }
        })

        //打开添加窗口
        function openAddWindow(data) {
            //弹出添加框
            layer.open({
                type: 1  //弹出1类型框框
                , content: $("#role-add-layer").html()
                , title: "编辑"
                , area: ['500px', '400px']
                , btn: ['提交', '取消']
                , success: function (index, layero) {  //弹出窗口时
                    form.render();

                    if (data != null) {
                        form.val("role-add-form", data); //
                    }

                }
                , yes: function (index, layero) {  //点击yes按钮之后

                    //发送ajax请求
                    $.ajax({
                        url: "sys/role/" + (data == null ? "add" : "update")
                        , type: 'POST'
                        , data: $("#role-add-form").serialize()
                        , success: function (result) {
                            if (result.state) {
                                //添加或更新成功
                                //重新加载table
                                table.reload('role-table', {});
                                layer.close(index); //关闭弹出层
                            } else {
                                layer.msg(result.message);
                            }
                            layer.closeAll();
                        }
                    });
                }
            })

        }

        //给搜索按钮添加事件监听
        $("#btn").click(function () {
            table.reload("role-table", {
                where: {
                    name: $("#name").val()
                    , status: $("#status").val()
                }
            })
        });
    });


</script>

<!--添加框-->
<script type="text/html" id="role-add-layer">
    <form id="role-add-form" style="width: 80%" class="layui-form" lay-filter="role-add-form">
        <input type="hidden" name="id">

        <div class="layui-form-item">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入角色名"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input type="text" name="remark" required lay-verify="required" placeholder="请输入备注"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="status" title="有效" value="1" checked/>
                <input type="radio" name="status" title="无效" value="0"/>
            </div>
        </div>
    </form>
</script>

<!--授权管理框-->
<script type="text/html" id="menu-tree-layer">
    <ul id="menu-tree">
    </ul>
</script>